<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            height: 1000px;
            width: 2000px;
        }
    </style>

</head>
<body>

    <script>

        // 滚动条滚动距离，就是滚动的距离对应的像素值
        // 滚动条的长度就代表首屏的长度，轨道的长度是整个页面的长度

        console.log(window.pageXOffset);  // 可读可写，但是写入的值不会起作用，导致值和显示的不一致，而且在滚动滚动条也不会改变pageYOffset
        console.log(window.pageYOffset); //返回的数值单位 = 像素
        //存在兼容性问题



        // 可以解决IE8以及以下的兼容性的方法：到底哪个好使不明确
        //但是，在任意一个浏览器，二者若一个有值，另一个肯定是零
        console.log(document.body.scrollLeft);
        console.log(document.body.scrollTop);
        console.log(document.documentElement.scrollLeft);
        console.log(document.documentElement.scrollTop);

        // 所以解决兼容性，可以让这两个相加
        console.log(document.body.scrollLeft + document.documentElement.scrollLeft);



        // 封装兼容性方法 滚动条滚动距离
        // 返回对象    x，y的滚动距离
        function getScrollOffset() {
            if(window.pageXOffset) {
                return {
                    x: window.pageXOffset,
                    y: window.pageYOffset
                }
            }else{
                return {
                    x: document.body.scrollLeft + document.documentElement.scrollLeft,
                    y: document.body.scrollTop + document.documentElement.scrollTop
                }
            }
        }


    </script>
</body>
</html>